<template>
	<view class="video-container">
		<iframe :src="videoList.resUrl" width="100%" height="200" frameborder="0"></iframe>
		<<!-- web-view :src="videoList.resUrl"></web-view> -->
			<!-- <video src="videoList.resUrl"></video> -->
		<!-- 	<view class="video-controls">
				<view class="control-row">
					<view class="quality-selector">
						<text>清晰度：</text>
						<picker @change="onQualityChange" :value="currentQualityIndex" :range="qualityOptions">
							<text>{{qualityOptions[currentQualityIndex]}}</text>
						</picker>
					</view>
					<view class="playback-rate">
						<text>播放速度：</text>
						<picker @change="onSpeedChange" :value="currentSpeedIndex" :range="playbackSpeeds">
							<text>{{playbackSpeeds[currentSpeedIndex]}}x</text>
						</picker>
					</view>
				</view>
			</view> -->

			<view class="video-info">
				<view class="video-title u-line-2">{{videoList.title}}</view>
				<view class="video-meta">
					<text class="codec">编码格式：{{videoCodec}}</text>
					<text class="quality">{{videoList.resName}}</text>
					<text class="save-btn" @click.stop="handleSave">保存视频</text>
				</view>
			</view>
	</view>
</template>

<script>
	import {
		history_list,
		getVideoexport,
		support_list
	} from '@/api/user.js'

	// import 'easyplayer/dist/style.css'
	// import EasyPlayer from 'easyplayer'

	export default {
		data() {
			return {
				videoList: {},
				videoCodec: 'auto', // 自动检测编码格式
				currentQualityIndex: 0,
				currentSpeedIndex: 2,
				qualityOptions: ['标清 480P', '高清 720P', '超清 1080P', '蓝光 4K'],
				playbackSpeeds: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
				videoContext: null,
				isPlaying: false,
				currentTime: 0,
				duration: 0
			}
		},
		onLoad() {
			// this.videoList = uni.getStorageSync('videolist')
			// // 初始化视频上下文
			// this.videoContext = uni.createVideoContext('myVideo', this)
			// // 检测设备支持的编码格式
			// this.detectVideoCodec()

		},

		onShow() {
			this.videoList = uni.getStorageSync('videolist')
			this.video = uni.getStorageSync('video')

			// const player = new EasyPlayer({
			// 	container: '#easyplayer',
			// 	src: this.videoList.resUrl, // 替换为你的视频源地址
			// 	type: 'auto', // 自动检测视频格式
			// 	autoplay: true,
			// 	controls: true,
			// 	width: '100%',
			// 	height: '100vh'
			// });
		},
		methods: {
			// 检测视频编码格式
			detectVideoCodec() {
				const video = document.createElement('video')
				if (video.canPlayType('video/mp4; codecs="hevc,mp4a.40.2"')) {
					this.videoCodec = 'h265'
				} else if (video.canPlayType('video/mp4; codecs="avc1.42E01E,mp4a.40.2"')) {
					this.videoCodec = 'h264'
				}


			},

			// 视频播放控制
			onPlay() {
				this.isPlaying = true
			},
			onPause() {
				this.isPlaying = false
			},
			onEnded() {
				this.isPlaying = false
			},
			onVideoError(err) {
				uni.showToast({
					title: '视频播放出错：' + err.detail.errMsg,
					icon: 'none'
				})
			},
			onVideoWaiting() {
				uni.showLoading({
					title: '视频加载中...'
				})
			},
			onTimeUpdate(e) {
				this.currentTime = e.detail.currentTime
				this.duration = e.detail.duration
			},

			// 清晰度切换
			onQualityChange(e) {
				this.currentQualityIndex = e.detail.value
				// 这里可以根据清晰度切换不同的视频源
				const currentTime = this.currentTime
				// this.videoList.resUrl = 新的视频地址
				this.$nextTick(() => {
					this.videoContext.seek(currentTime)
				})
			},

			// 播放速度切换
			onSpeedChange(e) {
				this.currentSpeedIndex = e.detail.value
				this.videoContext.playbackRate(this.playbackSpeeds[e.detail.value])
			},

			// 全屏切换
			onFullScreenChange(e) {
				console.log('全屏状态：', e.detail.fullScreen)
			},

			// 保存视频
			handleSave() {
				uni.showLoading({
					title: '保存中...'
				})

				// 实现视频保存逻辑
				setTimeout(() => {
					uni.hideLoading()
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
				}, 1500)
			}
		}
	}
</script>

<style lang="scss">
	.video-container {
		background-color: #000;

		.video-player {
			width: 100%;
			height: 420rpx;
		}

		.video-controls {
			padding: 20rpx;
			background: #f8f8f8;

			.control-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;

				.quality-selector,
				.playback-rate {
					display: flex;
					align-items: center;
					font-size: 26rpx;

					text {
						margin-right: 10rpx;
					}
				}
			}
		}

		.video-info {
			padding: 20rpx;
			background: #fff;

			.video-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}

			.video-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.codec,
				.quality {
					font-size: 24rpx;
					color: #666;
					padding: 4rpx 12rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
				}

				.save-btn {
					font-size: 24rpx;
					background: #FF7220;
					color: #fff;
					padding: 8rpx 24rpx;
					border-radius: 32rpx;
				}
			}
		}
	}
</style>